<template>
    <div>
<!-- 面包屑导航区域-->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/users' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
<!--表格区域-->
      <el-table :data="rightsList" border style="width: 100%" lazy highlight-current-row stripe>
        <el-table-column label="#" type="index" >
        </el-table-column>
        <el-table-column label="权限名称" prop="authName" >
        </el-table-column>
        <el-table-column label="路径" prop="path">
        </el-table-column>
        <el-table-column label="权限等级" prop="level">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.level<1">一级</el-tag>
            <el-tag type="warning" v-else-if="scope.row.level>1 && scope.row.level<3">二级</el-tag>
            <el-tag type="success" v-else="scope.row.level<1">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import {request} from "../../../network/axios";

export default {
  name: "Rights",
  created() {
    this.getRightsList()
  },
  data(){
    return{
      rightsList:[],
      queryInfo:{
        id:'',
        path:'',
        level:''
      }
    }
  },
  methods:{
    getRightsList(){
      request({
        url:'rights/list',
        params:this.queryInfo
      }).then(res=>{
        console.log(res.data.data);
        this.rightsList = res.data.data
      })
    }
  }
}
</script>

<style scoped src="../../../assets/css/Rights.css">

</style>